<template>
	<div class="right-bottom">
		<div class="module-title">
			<span class="text">运动损伤监测</span>
			<SelectView year @change="change" />
		</div>

		<div class="pie-area">
			<div id="bottom-pie"></div>

			<ul class="legend-area">
				<li v-for="(item, key) in list" :key="key">
					<div>
						<div class="color-block"></div>
						{{ item.disname }}
					</div>
					<div>{{ item.countPeople }}人</div>
					<div>{{ item.percentage }}%</div>
				</li>
			</ul>
		</div>

		<div class="bar-chart" id="right-bottom-bar"></div>

		<div class="person-show">
			<ul>
				<li class="show-header">
					<div class="text">姓名</div>
					<div class="text">急性损伤</div>
					<div class="text">慢性损伤</div>
				</li>
			</ul>
			<ul class="body" v-if="show">
				<li v-for="(item, index) in userShow" :key="index">
					<div class="text">{{ item.name }}</div>
					<div class="text">{{ item.bloodFat }}</div>
					<div class="text">{{ item.bloodSuger }}</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import * as echarts from 'echarts';
import { barMoreOption, pieOption } from './options';
import SelectView from './SelectView.vue';
import { getDiseaseData } from '@/api';

const colors = [
	{
		color0: 'rgba(4, 94, 215, 1)',
		color1: 'rgba(4, 94, 215, 0.1)',
	},
	{
		color0: 'rgba(0, 158, 225, 1)',
		color1: 'rgba(0, 158, 225, 0.1)',
	},
	{
		color0: 'rgba(77, 214, 255, 1)',
		color1: 'rgba(77, 214, 255, 0.1)',
	},
	{
		color0: 'rgba(79, 255, 240, 1)',
		color1: 'rgba(79, 255, 240, 0.1)',
	},
	{
		color0: 'rgba(97, 204, 125, 1)',
		color1: 'rgba(97, 204, 125, 0.1)',
	},
];
export default {
	name: 'right-bottom',
	components: {
		SelectView,
	},
	data() {
		return {
			show: false,
			chart: null,
			chartPie: null,
			timer: null,
			index: 0,
			list: [],
			userList: [],
		};
	},

	computed: {
		userShow() {
			const { userList, index } = this;
			const start = index * 2;
			const end = start + 2;
			return userList.slice(start, end);
		},
	},

	mounted() {
		this.chart = echarts.init(document.getElementById('right-bottom-bar'));
		this.chartPie = echarts.init(document.getElementById('bottom-pie'));

		this.eventBus.$on('resize', () => {
			if (this.chart) this.chart.resize();
			if (this.chartPie) this.chartPie.resize();
		});
	},
	methods: {
		loop() {
			this.show = true;
			clearInterval(this.timer);
			this.timer = setInterval(() => {
				this.show = false;
				this.index++;
				if (this.index >= this.userList.length / 2) {
					this.index = 0;
				}
				this.$nextTick(() => {
					this.show = true;
				});
			}, 5000);
		},
		//  根据筛选条件 默认触发一次
		change(year) {
			this.getData(year);
		},
		async getData(year) {
			const result = await getDiseaseData(year);
			const { first, second, third } = result;
			this.userList = third;
			this.loop();
      this.list = first || [];
      const pieData = first.map(({ disname, countPeople }) => {
        return {
          name: disname,
          value: countPeople,
        };
      });

			this.chartPie.setOption(pieOption(pieData));
			const x = [];
			const dataJson = {};
			second.map(({ time, value }, i) => {
				x.push(time);
				if (i == 0) {
					const names = Object.keys(value);
					names.map((name, index) => {
						dataJson[name] = {
							name,
							data: [],
							...colors[index],
						};
					});
				}
				for (let key in value) {
					const v = value[key];
					dataJson[key].data.push(v);
				}
			});

			this.chart.setOption(barMoreOption(x, Object.values(dataJson)));
		},
	},

	beforeDestroy() {
		if (this.chart) this.chart.dispose();
		if (this.chartPie) this.chartPie.dispose();
		this.eventBus.$off('resize');
	},
};
</script>

<style lang="scss">
.right-bottom {
	padding: 1vh 2%;
	margin-top: 1.4vh;

	.pie-area {
		display: flex;

		.legend-area {
			padding-top: 1vh;
			height: 11.4074vh;
			width: 20.1875vw;
			display: grid;
			grid-template-rows: 20% 20% 20% 20% 20%;
			padding-right: 2vw;

			li {
				height: 2vh;
				display: grid;
				grid-template-columns: 33% 33% 33%;
				color: #fff;
				font-size: 1.1111111vh;
				border-bottom: 1px solid rgba(48, 147, 240, 0.44);

				div {
					padding-left: 0.5vw;
					display: flex;
					align-items: center;
					justify-content: center;

					&:first-child {
						justify-content: flex-start;
					}
				}

				.color-block {
					height: 1.0185vh;
					width: 1.0185vh;
					margin-right: 5%;
				}

				&:nth-child(1) {
					.color-block {
						background-image: linear-gradient(
							rgb(4, 94, 215),
							rgb(10, 151, 237)
						);
					}
				}
				&:nth-child(2) {
					.color-block {
						background-image: linear-gradient(
							rgb(0, 158, 255),
							rgb(0, 205, 255)
						);
					}
				}
				&:nth-child(3) {
					.color-block {
						background-image: linear-gradient(
							rgb(77, 214, 255),
							rgb(102, 240, 255)
						);
					}
				}
				&:nth-child(4) {
					.color-block {
						background-image: linear-gradient(
							rgb(79, 255, 240),
							rgb(23, 240, 204)
						);
					}
				}
				&:nth-child(5) {
					.color-block {
						background-image: linear-gradient(
							rgb(97, 204, 125),
							rgb(156, 240, 177)
						);
					}
				}
			}
		}
	}

	.bar-chart {
		height: 17.77777778vh;
	}
	#bottom-pie {
		height: 11.4074vh;
		width: 12vw;
	}

	.person-show {
		margin-top: 0.5vh;

		ul.body {
			animation: fadeInAnimation 2s ease-in;
		}

		li {
			background-color: transparent;
			display: grid;
			grid-template-columns: 33.33% 33.33% 33.33%;

			&:nth-child(2n) {
				background-color: rgba(48, 147, 240, 0.15);
			}

			&.show-header {
				background-color: rgba(48, 147, 240, 0.3);
				border-top-left-radius: 0.781vw;
				border-top-right-radius: 0.781vw;
				font-weight: bold;
			}

			.text {
				text-align: center;
				line-height: 3.333333vh;
			}
		}
	}
}
</style>
